<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <form action=""></form> -->
    账号：<input type="text" name="username" id="uname">
    密码：<input type="text" name="password" id="pwd">
    <button type="button" onclick="get1()">get请求不带参数</button>
    <button type="button" onclick="get2()">get请求带参数</button>
</body>
<script>
    
    function get1(){
        //1.实例化xhr对象
        var xhr
        if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest()  // 状态0  IE6以上
        }else{ 
            xhr = new ActiveXObject("Microsoft.XMLHTTP")  // IE6 IE5
        }
        
        //2. 设置请求方式和地址
        // 1) 请求方式 2）请求地址
        xhr.open("get", "http://localhost:3000/get1")  // 状态1
        //3.发送请求
        xhr.send()  // 状态2
        //4.接收响应数据
        xhr.onreadystatechange = function(){
            // xhr.readyState 里面保存着 0-4 的五个状态
            if(xhr.readyState == 4 && xhr.status == 200){
                // 拿到完整数据
                console.log(xhr.responseText); 
            }
        }
    }

    function get2(){
        // 得到用户输入的是什么？
        // 得到元素节点
        var uname = document.getElementById("uname").value
        var pwd = document.getElementById("pwd").value
        //1.实例化xhr对象
        var xhr = new XMLHttpRequest()  // 状态0
        //2. 设置请求方式和地址
        // 1) 请求方式 2）请求地址
        // 拼接请求地址字符串 带参数
        // http://localhost:3000/get2?username=王春password=123456 格式
        xhr.open("get", `http://localhost:3000/get2?username=${uname}&password=${pwd}`)  // 状态1
        // console.log(`http://localhost:3000/get2?username=${uname}&password=${pwd}`);
        //3.发送请求
        xhr.send()  // 状态2
        //4.接收响应数据
        xhr.onreadystatechange = function(){
            // xhr.readyState 里面保存着 0-4 的五个状态
            if(xhr.readyState == 4 && xhr.status == 200){
                // 拿到完整数据
                console.log(xhr.responseText); 
            }
        }
    }
</script>
</html>